<script setup lang="ts">

import { computed, toRefs } from 'vue'

import { ElMessage } from 'element-plus'

const props = defineProps({
  orderDetail: {
    type: Object,
    required: true,
  },
})
const { orderDetail } = toRefs(props)

// 地址渲染文本
const getAddress = computed(() => {
  let result: Array<string> = []
  if (orderDetail) {
    result.push(orderDetail.value.province)
    result.push(orderDetail.value.city)
    result.push(orderDetail.value.area)
    result.push(orderDetail.value.town)
    result.push(orderDetail.value.address)
    return result.join('')
  }
  return result
})


</script>

<template>
  <div>
    <div class="order_detail_user_info">
      <div class="title">公司信息</div>
      <div class="info_list">
        <div class="info_item">
          <div class="label">公司名称:</div>
          <div class="value">
            {{ orderDetail.username }}
          </div>
        </div>
        <div class="info_item contact_person">
          <div class="label">手机号:</div>
          <div class="value">
            <span>{{ orderDetail.phone }}</span>
          </div>
        </div>
        <div class="info_item">
          <div class="label">公司地址:</div>
          <div class="value">{{ getAddress }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.order_detail_user_info {
  display: flex;
  flex-direction: column;
  gap: 12px;

  .title {
    font-size: 14px;
    font-weight: bold;
    padding-left: 6px;
    border-left: 3px solid $primaryColor;
  }

  .info_list {
    display: flex;
    flex-direction: column;
    padding: 0 16px;
    row-gap: 12px;

    .info_item {
      width: 100%;
      display: flex;
      gap: 5px;

      .label {
        white-space: nowrap;
        color: #606266;
        width: 62px;
        text-align: right;
      }
    }

    .contact_person {
      .value {
        display: flex;
        gap: 5px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        word-wrap: break-word;
        word-break: break-all;
      }
    }
  }
}
</style>
